<!--
 * @Description: 菜单配置-路由配置
-->
<template>
  <BaseMainSlot>
    <template v-slot:zhactbar>
      <ActionBar
        :add-active="addActive"
        :del-active="delActive"
        :edit-active="editActive"
        :cancel-active="cancelActive"
        :save-active="saveActive"
        @add="add"
        @cancel="cancel"
        @edit="edit"
        @del="del"
        @save="save"
      />
    </template>
    <template v-slot:searchbox>
      <selectbut :buttonselectlist="buttonselectlist" @nowselectbuttonindex="nowselectbuttonindex" />
    </template>
    <template v-slot:boxleft>
      <div v-if="nowselectypeindex === 1 || nowselectypeindex === 0" class="zh-search">
        <div v-if="nowselectypeindex === 0" class="label-input mr-20">
          <div class="label">角色:</div>
          <div class="input">
            <el-select v-model="searchList.roleid">
              <el-option
                v-for="(item,index) in roleList"
                :key="index"
                :label="item.roleName"
                :value="item.roleId"
              />
            </el-select>
          </div>
        </div>
        <div v-if="nowselectypeindex === 1" class="label-input mr-20">
          <div class="label">用户:</div>
          <div class="input">
            <el-select v-model="searchList.userid">
              <el-option
                v-for="(item,index) in userList"
                :key="index"
                :label="item.username"
                :value="item.id"
              />
            </el-select>
          </div>
        </div>
        <div class="search ml-20">
          <img src="~@/assets/action-bar-icon/search.png" @click="search" />
        </div>
      </div>
      <el-tree ref="catetreeone" :data="tableDataone" show-checkbox :props="treePropstype" @node-click="treeclick" @check="handleSelectionChange" />
    </template>
    <template v-slot:boxright>
      <el-tree ref="catetreetwo" :data="tableData" show-checkbox :props="treePropstype" @node-click="treeclick" @check="handleSelectionChange" />
    </template>
  </BaseMainSlot>
</template>

<script>
import ActionBar from "@/components/ActionBar";
import selectbut from "@/components/selectbutton/index.vue"
import nowpagereq from "@/api/system-settings/menu-config/index";
import BaseMainSlot from "@/components/BaseMainSlot/basezuoyou.vue"
import { mymixin } from "@/utils/mixin"
export default {
  name: "MenuConfig",
  components: { BaseMainSlot, ActionBar, selectbut },
  mixins: [mymixin],
  data() {
    return {
      nowselectypeindex: 0,
      roleList: [],
      userList: [],
      buttonselectlist: [
        { name: "角色路由配置" },
        { name: "用户路由配置" },
        { name: "农业类型路由" }
      ],
      treePropstype: {
        children: 'children',
        label: 'metaName'
      },
      tableDataone: [],
      searchList: {},
      nowselectedList: []
    };
  },
  watch: {
  },
  created() {
    this.getselectdatalist()
  },
  mounted() {
    this.getTableDataList()
  },
  methods: {
    // 获取当前选中的配置类型index
    nowselectbuttonindex(e) {
      this.nowselectypeindex = e
      if (e === 1) {
        this.getTableDataListuser()
      } else if (e === 0) {
        this.getTableDataListrole()
      } else if (e === 2) {
        this.getTableDataListfarmingType()
      }
    },
    // 树状选中时节点数据
    treeclick(eone, etwo, ethree) {
      // console.log(eone)
      // console.log(etwo)
      // console.log(ethree)
      this.editActive = true
      this.formData = eone
    },
    // 所有种养类别树状图选中节点时触发
    handleSelectionChange() {
      this.nowselectedList = [];
      // const list = [...this.$refs.catetreetwo.getCheckedNodes(), ...this.$refs.catetreetwo.getHalfCheckedNodes()]
      const list = [...this.$refs.catetreetwo.getCheckedNodes()]
      this.nowselectedList = list.map(item => {
        return item.plantingTypeId
      });
      if (this.nowselectedList && this.nowselectedList.length > 0) this.delActive = true;
      else this.delActive = false;
    },
    // 获取下拉框数据
    getselectdatalist() {
      nowpagereq.getroleAll().then(
        res => {
          this.roleList = res.data
          // this.getTableDataListrole()
        }
      )
      nowpagereq.getuserAll().then(
        res => {
          this.userList = res.data
        }
      )
    },
    // 表格查询 --- 获取所有路由
    getTableDataList() {
      this.tableData = []
      nowpagereq.getallmenulist().then(res => {
        if (res.code === 1) {
          // this.$message.success('查询成功')
        } else {
          this.$message.error('查询失败')
        }
        let data = res.data;
        this.tableData = data;
        this.tableData.forEach(item => {
          item.metaName = item.meta.name
          this.$set(item, "metaName", item['meta']['title'])
          if (item.children) {
            item.children.forEach(itemTwo => {
              // itemTwo.metaName = itemTwo.meta.name
              this.$set(itemTwo, "metaName", itemTwo['meta']['title'])
            })
          }
        })
        this.resetActionBar();
      });
      // 判断搜索输入框数据
    },
    // 获取角色拥有路由
    getTableDataListrole(id) {
      let roleId = id || 1
      this.tableDataone = []
      nowpagereq.getrolelist(roleId).then(res => {
        if (res.code === 1) {
          // this.$message.success('查询成功')
        } else {
          this.$message.error('查询失败')
        }
        let data = res.data;
        this.tableDataone = data
        this.resetActionBar();
      });
      // 判断搜索输入框数据
    },
    // 获取用户拥有路由
    getTableDataListuser(id) {
      let userId = id || this.userList[0].id || 1
      this.tableDataone = []
      nowpagereq.getuserlist(userId).then(res => {
        if (res.code === 1) {
          // this.$message.success('查询成功')
        } else {
          this.$message.error('查询失败')
        }
        let data = res.data;
        this.tableDataone = data
        this.resetActionBar();
      });
      // 判断搜索输入框数据
    },
    // 获取农业类型拥有路由
    getTableDataListfarmingType() {
    //   let userId = id || this.userList[0].userId || 1
      this.tableDataone = []
      nowpagereq.getfarmingTypelist().then(res => {
        if (res.code === 1) {
          // this.$message.success('查询成功')
        } else {
          this.$message.error('查询失败')
        }
        let data = res.data;
        this.tableDataone = data
        this.resetActionBar();
      });
      // 判断搜索输入框数据
    },
    search() {
      this.currentPage = 1;
      this.getTableDataList();
    },
    changePageSize(pageSize) {
      this.pageSize = pageSize;
      this.getTableDataList();
    },
    changeCurrentPage(currentPage) {
      this.currentPage = currentPage;
      this.getTableDataList();
    },
    handleEdit(row) {
      console.log(row)
      if (row.indflag) {
        this.$message.warning("请勿选择空数据")
        return
      }
      this.formData = row;
      this.editActive = true;
      this.saveActive = false;
      this.cancelActive = true;
      this.canInput = false;
    },
    // 删除时触发方法
    delmessage() {
      nowpagereq.dellist(this.nowSelectList).then(
        res => {
          if (res.code === 1) {
            this.$message.success("删除成功！");
            this.getTableDataList();
          } else {
            this.$message.error("删除失败！");
          }
        }
      )
    },
    async save() {
      if (this.nowselectypeindex === 0) {
        let par = {
          id: this.roleId,
          permisslist: this.permisslist,
          roleRouteMapperId: this.roleRouteMapperId
        }
        nowpagereq.addrolelist(par).then(res => {
          if (res.code === 1) {
            this.$message.success("修改成功！");
            this.getfuncauth()
            this.cancel()
          } else {
            this.$message.success("修改失败！");
          }
        })
        console.log("设置权限")
      }
    }
  }
};
</script>

<style scoped lang="scss">
.zh-search {
  // width: 100%;
  height: 100px;
  // border: #23fff8 1px solid;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  margin-left: 20px;
  overflow: auto;
  .label-input {
    display: flex;
    align-items: center;
    .label {
      width: 100px;
      white-space: nowrap;
    }
  }
}
</style>
